import React, { useContext, useState } from 'react';
import { Platform, Alert, ImageBackground, View,Dimensions} from 'react-native';
import { Image, ListItem } from 'react-native-elements';

import AuthDialog from '../components/AuthDialog';
import LocaleContext from '../libs/locale';
import WalletContext from '../libs/wallet';
import lock from '../assets/Security/lock.png';

import icon1 from "../assets/Security/icon1.png";
import icon2 from "../assets/Security/icon2.png";
import icon3 from "../assets/Security/icon3.png";
import icon4 from "../assets/Security/icon4.png";
import AsyncStorage from "@react-native-async-storage/async-storage";

const {width,height} = Dimensions.get('window');
const iconsize=32;

const Security = ({ navigation, setWallet }: any) => {
  const locale: any = useContext(LocaleContext);
  const wallet = useContext(WalletContext);
  const [authDialogVisible, setAuthDialogVisible] = useState(false);
  const [authDialogVisible2, setAuthDialogVisible2] = useState(false);

  const onDeleteWallet = () => {
    if (!wallet?.exported) {
      Alert.alert(locale._('My.security.deleteWallet.mustExport'), locale._('My.security.deleteWallet.mustExportDesc'));
      return;
    }

    setAuthDialogVisible(true);
  };

  const onAuthDialogClose = (validated: boolean) => {
    setAuthDialogVisible(false);

    if (validated) {
      setWallet(null);
      navigation.reset({ index: 0, routes: [{ name: 'Guest' }] });
    }
  };

  const onAuthDialogClose2 = (validated: boolean) => {
    setAuthDialogVisible2(false);

    if (validated) {
      navigation.navigate('AboutPrivateKey');
    }
  };

  return (
    <View>
      <View style={{
        backgroundColor: '#fff',
        alignItems: 'center',
        paddingTop: 76,
        paddingBottom:26,
        marginTop:Platform.OS == 'ios' ? 20 : -20,
      }}>
        <ImageBackground source={lock} style={{ width:width, height: height*0.2 }} />
      </View>

      <View>
        <ListItem bottomDivider onPress={() => setAuthDialogVisible2(true)}>
          <ImageBackground source={icon1} style={{ width: iconsize, height: iconsize }} />
          <ListItem.Content>
            <ListItem.Title>{locale?._('My.security.exportPrivateKey')}</ListItem.Title>
          </ListItem.Content>
          <ListItem.Chevron />
        </ListItem>
        <ListItem bottomDivider
          onPress={() => navigation.navigate('Export', { kind: 'keystore' })}
        >
          <ImageBackground source={icon2} style={{ width: iconsize, height: iconsize }} />
          <ListItem.Content>
            <ListItem.Title>{locale?._('My.security.exportKeystore')}</ListItem.Title>
          </ListItem.Content>
          <ListItem.Chevron />
        </ListItem>
        <ListItem bottomDivider onPress={() => navigation.navigate('ModifyPassword')}>
          <ImageBackground source={icon3} style={{ width: iconsize, height: iconsize }} />
          <ListItem.Content>
            <ListItem.Title>{locale?._('My.security.modifyPassword')}</ListItem.Title>
          </ListItem.Content>
          <ListItem.Chevron />
        </ListItem>
        <ListItem bottomDivider onPress={onDeleteWallet}>
          <ImageBackground source={icon4} style={{ width: iconsize, height: iconsize }} />
          <ListItem.Content>
            <ListItem.Title style={{ color: 'red' }}>{locale?._('My.security.deleteWallet')}</ListItem.Title>
          </ListItem.Content>
        </ListItem>
      </View>

      <AuthDialog visible={authDialogVisible} onClose={onAuthDialogClose} />
      <AuthDialog visible={authDialogVisible2} onClose={onAuthDialogClose2} />
    </View>
  );
};

export default Security;
